//处理上下文菜单事件

//实现自定义上下文菜单
var myDiv = document.getElementById('myDiv');
document.addEventListener("contextmenu",onShowMenu); //该事件支持冒泡 
function onShowMenu(event) { //属于鼠标事件
    //console.log('event=',event);
    event.preventDefault(); //取消默认的行为 (显示原始默认的右键菜单)    
    //把自定义的菜单元素显示
    var myMenu = document.getElementById('myMenu');
    myMenu.style.left = event.clientX+"px";
    myMenu.style.top = event.clientY+"px";
    myMenu.style.visibility = 'visible';
}
document.addEventListener('click',function (evt) {
    var myMenu = document.getElementById('myMenu');  
    myMenu.style.visibility = 'hidden';
})

//beforeunload事件 发生在window对象上面 触发该事件时会弹出一个提示框 内容自定义(然而在chrome下都不能弹出自定义的信息 ie下可以)
//window.addEventListener("beforeunload",onUnloaded); 
function onUnloaded(event) {
    var msg = "你确定要离开页面吗?";
    event.returnValue = msg+'事件属性值'; //对于ie和Firefox弹框会显示该值的内容
    
    return msg+'函数返回';// 对于Safari和chrome则会通过return值的内容弹出提示
}

//hashchange 事件 该事件必须添加在window上面 监听url参数的变化

window.addEventListener("hasChange",onHasChange); //没有成功触发
function onHasChange(event) {
    console.log('event.oldUrl,event.newUrl=',event.oldUrl,event.newUrl)
}
//检查浏览器是否支持 hashchange 事件
var isSupported = ("onhashchange" in window) && (document.documentMode ===
    undefined || document.documentMode > 7);

console.log("isSupported=",isSupported);

//H5事件还有很多关于移动设备的事件 13.4.8 设备事件 395页开始

//模拟事件 也就是自己派发事件
var btn = document.getElementById("myBtn");
btn.addEventListener('click',onMyBtnHandler);

function onMyBtnHandler(event) {
    console.log("onMyBtnHandler...");
}
var event = document.createEvent("MouseEvents"); //创建一个鼠标事件 KeyboardEvent 键盘事件
event.initMouseEvent('click',true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null); //初始化事件 initKeyEvent() 初始化键盘事件
btn.dispatchEvent(event); //开始派发事件

//自定义事件 
var myEvent = document.createEvent("CustomEvent");
myEvent.initCustomEvent("myCustomEvent",true,true,"我自己定义的事件");
myDiv.addEventListener("myCustomEvent",onMyEvent);
myDiv.dispatchEvent(myEvent);
function onMyEvent(event) {
    console.log('event.detail',event.detail)
}

//定义一个函数去创建自定义事件方便使用
function createEvent(type,canBubble,canCancle,detail) {
    var e = document.createEvent("CustomEvent");
    e.initCustomEvent(type,canBubble,canCancle,detail);
    return e;
}

